<!DOCTYPE html>
<html>
   <head>
        <title>后台管理</title>
        <meta charset="utf-8">
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <!-- 引入资源文件 -->
        <#include "../../common/res.html" />
   </head>
   
   <body class=""> 
  	<!-- top 导航 -->
    <#include "../../common/header.html" />
	
	<!-- 菜单导航 -->
    <#include "../cms-nav.html" />

	<div class="content">
		<div class="container-fluid">
			
			<div class="block span6">
				<div class="block-body collapse in">
					<!-- 课程基本信息 -->
					<table class="table list">
						<tbody>
							<tr>
								<td style="width: 600px;">
									<#if (course.picture)?? && course.picture != ''>
									<img src="${course.picture!}" style="width: 180px;height:100px;float: left;">
									<#else>
									<img src="${s.base}/res/i/course.png" style="width: 180px;height:100px;float: left;">
									</#if>
									<div class="ml-15 w-350" style="float:left;">
										<p class="ellipsis"  title="${course.name!}"><strong>${course.name!}</strong></p>
										<p class="ellipsis-multi h-40" title="${course.brief!}">${course.brief!}</p>
									</div> 
								</td>
								<td>
										<p>${course.time!}</p>
										<p style="color: red;">
											<#if course.free == 1>免费<#else>￥${course.price!}</#if>
										</p>
										<p>
										<#if course.level == 1>
										初级
										<#elseif course.level == 2>
										中级
										<#else>
										高级
										</#if>
										</p>
									</td>
									<td>
										<p>${course.classifyName!} / ${course.subClassifyName!}</p> 
										<p>${course.studyCount!}人在学</p>
										<p>${course.username!}</p>
										<p>${course.updateTime?string('yyyy-MM-dd HH:mm')}</p>
									</td>
									<td style="width:120px;">
										<p>推荐权重：${course.weight!}</p> 
										<p><a href="javascript:void(0)" onclick="toEdit(${course.id!})">修改信息</a></p>
										<p><a href="${s.base}/course/append.html?courseId=${course.id!}" >添加章节</a></p> 
									</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			
			<div class="row-fluid">
				<ul id="myTab" class="nav nav-tabs">
					<li class="active">
						<a href="#section" data-toggle="tab">章节</a>
					</li>
					<li onclick="activeComment(${course.id!},0);"><a href="#comment" data-toggle="tab">评论</a></li>
					<li onclick="activeComment(${course.id!},1);"><a href="#qa" data-toggle="tab">问答</a></li>
					<li><a href="#studentCount" data-toggle="tab">统计</a></li>
				</ul>
				
				<div id="myTabContent" class="tab-content" style="padding: 10px;">
					<!-- 课程章节-start -->
					<#include "./readSection.html" />
					<!-- 课程章节-end -->
					
					<!-- 评论 -start -->
					<div class="tab-pane fade" id="comment"></div>
					<!-- 评论 -end -->
					
					<!-- 问答 -start -->
					<div class="tab-pane fade" id="qa"></div>
					<!-- 问答 -end -->
					
					<!-- 报表 - start -->
					<#include "./readReport.html" />
					<!-- 报表 - end -->
				</div>
			</div>
			
		</div>
	</div>
	
	<!-- 课程信息弹出层 -start -->
	<div class="modal" id="myModal" tabindex="-1" role="dialog"  aria-hidden="true">
		<div class="modal_wapper">
			<div class="modal-dialog w-8" >
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title" >课程基本信息</h4>
					</div>
					
					<div class="modal-body">
						<form role="form" id="courseForm" method="post" action="${s.base}/course/doMerge.html"  enctype="multipart/form-data">
							<input type="hidden" name="id" value=""/>
							<div class="form-group clearfix"> 
								<label class="control-label" >图片 <span id="imgErrSpan" style="color:red;font-weight:normal;"></span> </label> 
								<div class="col-sm-10">
										<input type="file" id="pictureImg" name="pictureImg" style="display: none;" onchange="photoImgChange();">
										<div class="ui-avatar-box">
										<img id="coursePicture" style="max-width: 250px;height:120px;">
										<a href="javascript:void(0);" onclick="doUpload();" style="text-decoration: underline;margin-top:5px;">选择图片</a>
										</div>
								</div>
							</div>
							<div class="form-group clearfix"> 
								<label class="control-label" >名称</label> 
								<div class="col-sm-10">
								<input type="text" class="form-control" name="name" id="name" placeholder="请输入名称">
								</div>
							</div>
							<div class="form-group clearfix"> 
									<label class="control-label" >分类</label>
                                    <div class="col-sm-4">
                                        <select id="classify" name="classify" class="form-control"  type="select">
											<#list classifys as item>
											<option value="${item.code!}">${item.name}</option>
											</#list>
										</select>
                                    </div>
                                    <label class="control-label" >二级分类</label>
                                    <div class="col-sm-4">
                                        <select id="subClassify" name="subClassify" class="form-control"  type="select">
											<#list subClassifys as item>
											<option parentCode="${item.parentCode!}" value="${item.code!}">${item.name}</option>
											</#list>
										</select>
                                    </div>
							</div>
							<div class="form-group clearfix"> 
									<label class="control-label" >级别</label>
                                    <div class="col-sm-4">
                                       <select name="level" class="form-control"  type="select">
											<option value="1">初级</option>
											<option value="2">中级</option>
											<option value="3">高级</option>
										</select>
                                    </div>
                                    <label class="control-label" >推荐权重</label>
                                    <div class="col-sm-4">
                                        <input type="text" name="weight" class="form-control" />
                                    </div>
							</div>
							<div class="form-group clearfix"> 
									<label class="control-label" >是否免费</label>
                                    <div class="col-sm-4">
                                       <select name="free" class="form-control"  type="select">
											<option value="1">是</option>
											<option value="0">否</option>
										</select>
                                    </div>
                                    <label class="control-label" >价格</label>
                                    <div class="col-sm-4">
                                        <input type="text" name="price" class="form-control" />
                                    </div>
							</div>
							<div class="form-group clearfix"> 
									<label class="control-label" >讲师</label>
                                    <div class="col-sm-4">
                                       <input type="text" class="form-control"  name="username" >
                                    </div>
                                    <label class="control-label" >时长</label>
                                    <div class="col-sm-4">
                                        <input class="form-control"  type="text" name="time" readonly="readonly">
                                    </div>
							</div>
							<div class="form-group clearfix"> 
								<label class="control-label" >概述</label> 
								<div class="col-sm-10">
								<textarea name="brief" rows="2" cols="60"></textarea>
								</div>
							</div>
						</form>
						
						<!-- tip提示-start -->
						<div id="_ocAlertTip" class="alert alert-success f-16" style="display: none;"></div>
						<!-- tip提示-end -->
					</div>
					
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="doSave();">保存</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 课程信息弹出层 -end -->
	
	<!-- 弹出层 alert 信息 -->  
    <div class="modal" id="_ocDialogModal" tabindex="-1" aria-hidden="true">
		<div class="modal_wapper small">
			<div class="modal-dialog w-4" >
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title f-16" >提示信息</div>
					</div>
					<div class="modal-body">
						<div><span class="color-oc f-16 oc-content"></span></div>
					</div>
					<div class="modal-footer modal-center">
						<button type="button" class="btn btn-primary oc-ok">确 定</button>
						<button type="button" class="btn btn-default oc-cancel">取 消</button>
					</div>
				</div>
			</div>
		</div>
	</div>
  <!-- 弹出层 alert 信息 --> 
	
	<script type="text/javascript">
		//过滤二级分类 
		function filterSubClassify(classify){
			var flag = false;
			$('#subClassify').find("option").each(function(i,item){
				if($(item).attr('parentCode') == classify){
					if(flag == false){
						$('#subClassify').val($(item).attr('value'));//默认选中第一个
						flag = true;
					}
					$(item).show();
				}else{
					$(item).hide();
				}
			});
		}
		$(function(){
			filterSubClassify($('#classify').val());//第一次加载的时候过滤
			$('#classify').change(function(){
				filterSubClassify($('#classify').val());
			});
		});
	
		function activeComment(courseId,type){
			var elId = 'comment';
			if(type == 1){
				elId = 'qa';
			}
			var url = '${s.base}/courseComment/pagelist.html';
			$("#" + elId).load(
				url,
				{'courseId':courseId,'type':type,'pageNum':1},
				function(){ }
			);
		}
		
		//修改课程基本信息
		function toEdit(id){
			$.ajax({
				url:'${s.base}/course/getById.html',
			    type:'POST',
			    dataType:'json',
			    data:{"id":id},
			    success:function(resp){
			    	var errcode = resp.errcode;
			    	if(errcode == 0){
			    		Modal.show('myModal');
			    		$("#courseForm").fill(resp.data);
			    		$('#coursePicture').attr('src',resp.data.picture)
			    	}
			    }
			});
		}
		
		//选择图片 
		function doUpload(){
			$('#pictureImg').click();
		}
		//选择图片
		function photoImgChange(){
			var img = $('#pictureImg').val();
			if(oc.photoValid(img)){
				oc.previewUploadImg('pictureImg','coursePicture');
				$('#coursePicture').show();
				$('#imgErrSpan').html('');
				return;
			}else{
				$('#imgErrSpan').html('&nbsp;请选择png,jpeg,jpg格式图片');
				$('#coursePicture').val('');
			}
		}
		
		//保存
		function doSave(){
			$('#courseForm').ajaxSubmit({
				datatype : 'json',
				success : function(resp) {
					var resp = $.parseJSON(resp);
					if (resp.errcode == 0) {
						window.location.reload();
					} else {
						alert('保存失败');
					}
				},
				error : function(xhr) {
				}
			});
		}
		
	</script>
</body>
</html>

